<template>
	<div v-loading="loading" class="shop-list-container">
		<div class="search-container">
			<div class="title">{{ title }}</div>
			<el-input v-model="shopInputSearchValue" placeholder="请输入名称搜索" size="small" />
		</div>
		<div class="list-content">
			<el-scrollbar ref="" style="height:100%" class="hid-scrollbar-x">
				<div v-show="hasSelectAllButton&&$store.state.user.shopId===0" :class="[-1===shopId?'active':'']"
					class="list-item" @click="chooseShop(selectAllOptions)">{{ selectAllOptions.name }}
				</div>
				<div v-for="item in shopAllData" :key="item.id" @click="chooseShop(item)">
					<div v-if="item.name !== '公域平台'" :class="[item.id===shopId?'active':'']" :title="'id:'+item.id"
						class="list-item">
						<div class="app-line-two">{{ item.name }}</div>
					</div>
				</div>
			</el-scrollbar>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	export default {
		props: {
			title: {
				type: String,
				default: '门店列表'
			},
			hasHeadquarters: {
				type: Boolean,
				default: false
			},
			hasSelectAllButton: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				loading: false,
				shopAllData: [],
				shopFilterArr: [],
				shopId: '',
				shopName: '',
				shopInputSearchValue: '',
				selectAllOptions: {
					id: -1,
					name: '所有门店'
				}
			}
		},
		computed: {
			...mapGetters([
				'userInfo',
				'manageShopList',
				'manageShopListExcludeHeadquarters'
			]),
			shopChange() {
				const {
					manageShopList,
					manageShopListExcludeHeadquarters
				} = this
				return {
					manageShopList,
					manageShopListExcludeHeadquarters
				}
			}
		},
		watch: {
			shopInputSearchValue(newValue, oldValue) {
				let filterArr = this.shopFilterArr
				filterArr = filterArr.filter(value => {
					return value.name.indexOf(newValue) !== -1
				})
				this.shopAllData = filterArr
			},
			shopChange() {
				this.fetchData()
			}
		},

		created() {},
		mounted() {
			this.fetchData()
		},
		methods: {
			/**
			 * 获取数据
			 */
			// 获取门店 激活门店
			fetchData() {
				this.loading = true
				if (this.hasHeadquarters) {
					this.shopAllData = this.manageShopList
					this.shopFilterArr = this.manageShopList
				} else {
					this.shopAllData = this.manageShopListExcludeHeadquarters
					this.shopFilterArr = this.manageShopListExcludeHeadquarters
				}
				if (this.shopAllData.length > 0) {
					const shopListMenuActiveShop = this.$store.state.menus
						.shopListMenuActiveShop
					if (
						shopListMenuActiveShop &&
						shopListMenuActiveShop.shopId &&
						shopListMenuActiveShop.shopId !== -1
					) {
						this.shopId = shopListMenuActiveShop.shopId
						this.shopName = shopListMenuActiveShop.shopName
					} else {
						this.shopId = this.shopAllData[0].id
						this.shopName = this.shopAllData[0].name
					}
					this.chooseShop({
						id: this.shopId,
						name: this.shopName
					})
				}
				this.loading = false
			},

			// 选择门店
			chooseShop(item) {
				this.shopId = item.id
				this.shopName = item.name
				this.$store.state.menus.shopListMenuActiveShop = {
					shopId: item.id,
					shopName: item.name
				}
				this.$emit('emitShopId', {
					shopId: this.shopId,
					shopName: this.shopName
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.shop-list-container {
		width: 180px;
		//padding: 20px 0;
		background-color: #fff;
		border-radius: 5px;
		margin-right: 10px;
		min-height: 500px;
		max-height: calc(100vh - 80px);
	}

	.search-container {
		height: 90px;
		padding: 0 10px;

		.title {
			height: 50px;
			line-height: 50px;
			font-size: 20px;
			font-weight: bold;
		}
	}

	.list-content {
		font-size: 14px;
		height: calc(100vh - 178px);

		.list-item {
			//height: 40px;
			line-height: 1.5;
			cursor: pointer;
			padding: 10px;
			width: 100%;
		}

		.active {
			color: #fff;
			background-color: $primary;
		}
	}
</style>
